<template>
  <el-form :model="ruleForm" ref="ruleForm" :inline="false">

    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card" style="display: flex;justify-content: space-between;align-items: center">
        <span class="header-card-title"></span>
        <div v-if="isDownload">
          <el-button type="primary" @click="handleBatchExportTable">批量下载表格</el-button>
          <el-button type="primary" @click="handleBatchExportUpToStandard">批量下载合格证</el-button>
        </div>
      </div>
      <el-table :data="ruleForm.tableData" border :header-cell-class-name="headerClass">

        <!--        <el-table-column label="操作" align="center" v-if="isEdit" fixed="left" width="100">-->
        <!--          <template #default="{row}">-->
        <!--            <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']" @click="handleWork(row)">编辑-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column align="center" label="车牌号" min-width="100">
          <template #default="{row}">
            {{ row.carNo }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="车架号" prop="vinNo" show-overflow-tooltip min-width="180"/>

        <el-table-column align="center" label="品牌/车系/车型" show-overflow-tooltip min-width="320">
          <template #default="{row}">
            {{ row.brandName }}{{ row.seriesName ? '/' + row.seriesName : '' }}{{
              row.modelName ? '/' + row.modelName
                  : ''
            }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="座位数" min-width="100" prop="seatNum"/>

        <el-table-column align="center" label="车辆状态" show-overflow-tooltip min-width="160">
          <template #default="{row}">
            {{ dictsName(dict.type.car_business_type, row.businessType) }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="客户名称" show-overflow-tooltip min-width="160" prop="customerName"/>

        <el-table-column align="center" label="产品类型" min-width="100" prop="contractType">
          <template #default="{row}">
            {{ dictsName(dict.type.quota_rent_type, row.contractType) }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="交强险到期日" min-width="120">
          <template #default="{row}">
            {{ row.jqxActualEndTime ? $dayjs(row.jqxActualEndTime).format('YYYY-MM-DD') : '' }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="商业险到期日" min-width="120">
          <template #default="{row}">
            {{ row.syxActualEndTime ? $dayjs(row.syxActualEndTime).format('YYYY-MM-DD') : '' }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="续保保单性质" min-width="120" prop="insuranceType">
          <template slot-scope="{row}">
            {{ selectDictLabel(dict.type.insurance_type, row.insuranceType) }}
          </template>
        </el-table-column>

        <!--交强险-->
        <el-table-column label="交强险" align="center">
          <el-table-column align="center" label="交强险是否续保" width="160" prop="jqxRenewalStatus">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.jqxRenewalStatus'"
                            :rules="{required: isEdit,trigger: 'change'}">
                <el-select v-model="row.jqxRenewalStatus" v-if="isEdit" style="width: 100%;"
                           placeholder="请选择交强险是否续保">
                  <el-option v-for="(item,index) in dict.type.jqx_renewal_type" :label="item.label"
                             :key="`jqx_renewal_type-${index}`" :value="item.value">
                  </el-option>
                </el-select>
                <span v-else>
                  {{ dictsName(dict.type.jqx_renewal_type, row.jqxRenewalStatus) }}
                </span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="当前交强保险供应商" show-overflow-tooltip min-width="180"
                           prop="jqxCompany"/>

          <el-table-column align="center" label="续保保险公司" width="160" prop="syxXbCompany">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.jqxXbCompany'"
                            :rules="{required: isEdit,trigger: 'change'}">
                <el-select v-model="row.jqxXbCompany" @change="(val)=>handleChange(val,'jqxXbCompany',$index)"
                           style="width: 100%" placeholder="续保保险公司" v-if="isEdit">
                  <el-option v-for="item in options" :key="item.supplierId" :label="item.supplierName"
                             :value="item.supplierId">
                  </el-option>
                </el-select>
                <span v-else>
                  {{ row.jqxXbCompany }}
                </span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="车船税是否缴纳" min-width="140" prop="processedByName">
            <template #default="{row}">
              <span>{{ row.carTaxStatus == '1' ? '是' : '否' }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <!--商业险-->
        <el-table-column label="商业险" align="center">
          <el-table-column align="center" label="商业险是否续保" width="160" prop="syxRenewalStatus">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.syxRenewalStatus'"
                            :rules="{required: isEdit,trigger: 'change'}">
                <el-select v-model="row.syxRenewalStatus" v-if="isEdit" style="width: 100%;"
                           placeholder="请选择商业险是否续保">
                  <el-option v-for="(item,index) in dict.type.sy_renewal_type" :key="`sy_renewal_type-${index}`"
                             :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <span v-else>
                  {{ dictsName(dict.type.sy_renewal_type, row.syxRenewalStatus) }}
                </span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="当前商业保险供应商" show-overflow-tooltip min-width="180"
                           prop="syxCompany"/>

          <el-table-column align="center" label="续保保险公司*" min-width="180" prop="syxXbCompany">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.syxXbCompany'"
                            :rules="{required: isEdit,trigger: 'change'}">
                <el-select v-model="row.syxXbCompany" @change="(val)=>handleChange(val,'syxXbCompany',$index)"
                           style="width: 100%" v-if="isEdit" placeholder="续保保险公司">
                  <el-option v-for="item in options" :key="item.supplierId" :label="item.supplierName"
                             :value="item.supplierId">
                  </el-option>
                </el-select>
                <span v-else>
                  {{ row.syxXbCompany }}
                </span>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table-column>

        <!--保险套餐-->
        <el-table-column label="保险套餐" align="center">
          <el-table-column align="center" label="车损险保额" min-width="180" prop="csxQuota">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.csxQuota'"
                            :rules="{required: isEdit,trigger: 'change'}">

                <el-select v-model="row.csxQuota" v-if="isEdit" style="width: 100%;"
                           placeholder="请选择车损险">
                  <el-option label="加入" value="加入"/>
                  <el-option label="不加入" value="不加入"/>
                </el-select>

                <span v-else>{{ row.csxQuota }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="三者险保额" min-width="180" prop="szxQuota">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.szxQuota'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.szxQuota" placeholder="请输入三者险保额" size="mini"/>
                <span v-else>{{ row.szxQuota }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="乘客保险保额" min-width="180" prop="ckQuota">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.ckQuota'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.ckQuota" placeholder="请输入乘客保险保额" size="mini"/>
                <span v-else>{{ row.ckQuota }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="驾驶员险额" min-width="180" prop="jsyQuota">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.jsyQuota'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.jsyQuota" placeholder="请输入驾驶员险额" size="mini"/>
                <span v-else>{{ row.jsyQuota }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="划痕险保额" min-width="180" prop="hhxQuota">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <el-input v-if="isEdit" v-model="row.hhxQuota" placeholder="请输入划痕险保额" size="mini"/>
                <span v-else>{{ row.hhxQuota }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="增值服务特约险" min-width="180" prop="zzfwQuota">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.zzfwQuota'"
                            :rules="{required: isEdit,trigger: 'change'}">
                <el-select v-model="row.zzfwQuota" v-if="isEdit" style="width: 100%;"
                           placeholder="请选择增值服务特约险">
                  <el-option label="加入" value="加入"/>
                  <el-option label="不加入" value="不加入"/>
                </el-select>
                <span v-else>{{ row.zzfwQuota }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <!--          <el-table-column align="center" label="车轮单独损失险" min-width="180" prop=" clQuota">-->
          <!--            <template #default="{row,$index}">-->
          <!--              <el-form-item class="formTable" :prop="'tableData.'+$index+'.clQuota'"-->
          <!--                            :rules="{required: isEdit,trigger: 'blur'}">-->
          <!--                <el-input v-if="isEdit" v-model="row.clQuota" placeholder="请输入车轮单独损失险" size="mini"/>-->
          <!--                <span v-else>{{ row.clQuota }}</span>-->
          <!--              </el-form-item>-->
          <!--            </template>-->
          <!--          </el-table-column>-->

          <!--          <el-table-column align="center" label="外部电网附加险" min-width="180" prop="wbdwQuota">-->
          <!--            <template #default="{row,$index}">-->
          <!--              <el-form-item class="formTable" :prop="'tableData.'+$index+'.wbdwQuota'"-->
          <!--                            :rules="{required: isEdit,trigger: 'blur'}">-->
          <!--                <el-input v-if="isEdit" v-model="row.wbdwQuota" placeholder="请输入外部电网附加险" size="mini"/>-->
          <!--                <span v-else>{{ row.wbdwQuota }}</span>-->
          <!--              </el-form-item>-->
          <!--            </template>-->
          <!--          </el-table-column>-->

          <el-table-column align="center" label="其他险种备注" min-width="180" prop="qtQuota">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <el-input v-if="isEdit" v-model="row.qtQuota" placeholder="请输入其他险种备注" size="mini"/>
                <span v-else>{{ row.qtQuota }}</span>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table-column>

        <!--其他险种-->
        <el-table-column label="其他险种" align="center">
          <el-table-column align="center" label="其他险种" min-width="180" prop="otherInsuranceRemark">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <el-input v-if="isEdit" v-model="row.otherInsuranceRemark" placeholder="请输入其他险种" size="mini"/>
                <span v-else>{{ row.otherInsuranceRemark }}</span>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table-column>

      </el-table>

    </el-card>
  </el-form>
</template>

<script>
import {getInsuranceSelectList} from "@/api/cwgd/insuranceSelect";

export default {
  name: "renewalTable",
  dicts: [
    "car_business_type",
    "quota_rent_type",
    "jqx_renewal_type",
    "sy_renewal_type",
    "insurance_type"
  ],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
    isDownload: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    insuranceSelect: () => import("../insuranceSelect"),
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    dictsName() {
      return (arr, type) => {
        let name = "";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  watch: {},
  data() {
    return {
      loading: false,
      headerStar: [],
      options: [],
    };
  },
  created() {
    this.handleList();
  },
  mounted() {
  },
  methods: {
    headerClass({row, column, rowIndex, columnIndex}) {
      for (let i = 0; i < row.length; i++) {
        if (this.headerStar.includes(row[i].property) && i == columnIndex) {
          return "header-class";
        }
      }
    },

    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;

      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value;
        } else {
          row[field] = "";
        }
      } else {
        row[field] = "";
      }
    },

    handleChange(val, key, index) {
      let index_ = this.options.findIndex((a) => a.supplierId === val);
      if (index_ !== -1) {
        this.codes = this.options[index_].supplierCode;
      }
      let obj = {
        code: this.options[index_].supplierCode,
        name: this.options[index_].supplierName,
        id: this.options[index_].supplierId,
      };

      this.value.tableData[index][key] = obj.name;
      this.$set(this.value.tableData[index],'syxXbCompany',obj.name)
      this.$set(this.value.tableData[index],'syxXbCompanyCode',obj.code)
      this.$set(this.value.tableData[index],'syxXbCompanyId',obj.id)
      this.$set(this.value.tableData[index],'jqxXbCompany',obj.name)
      this.$set(this.value.tableData[index],'jqxXbCompanyCode',obj.code)
      this.$set(this.value.tableData[index],'jqxXbCompanyId',obj.id)
      // if (key === "syxXbCompany") {
      //   this.value.tableData[index].syxXbCompanyCode = obj.code;
      //   this.value.tableData[index].syxXbCompanyId = obj.id;
      // }
      // if (key === "jqxXbCompany") {
      //   this.value.tableData[index].jqxXbCompanyCode = obj.code;
      //   this.value.tableData[index].jqxXbCompanyId = obj.id;
      // }

    },

    handleWork() {
    },

    //保险公司
    handleList() {
      getInsuranceSelectList({businessTypeCode: "5"}).then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },

    handleBatchExportTable() {
      let ids = this.ruleForm.tableData.map((item) => item.carId);
      this.download_json(
          "/car/insurance/exportCarList",
          [...ids],
          `批量下载表格_${new Date().getTime()}.xlsx`
      );
    },
    handleBatchExportUpToStandard() {
      let ids = this.ruleForm.tableData.map((item) => item.qualifiedCardOss);
      ids.map((a) => {
        this.$download.oss(a);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  ::v-deep.formTable {
    margin-bottom: 0;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
</style>


